<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阴影</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 20px auto 0;
            box-shadow: 0px 0px 7px #2908e4;
        }
    </style>
</head>
<body>
    <div>
        <p>阴影，是通过 box-shadow属性向边框加一个或多个阴影。</p>
        <p>box-shadow: h-shadow v-shadow blur color</p>
        <p>h-shadow：必选，水平阴影的位置。</p>
        <p>v-shadow：必选，垂直阴影的位置。</p>
        <p>blur：可选，模糊距离。</p>
        <p>color：可选，阴影的颜色。</p>
    </div>
    <div class="box"></div>
</body>
</html>